@layout("/common/_container.html"){
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>到店客户管理</h5>
            </div>
            <div style="display: none">
                <input type="hidden" id="backVisit" value="">
                <input type="hidden" id="oneChannelValue" value="">
                <input type="hidden" id="twoChannelValue" value="">
                <input type="hidden" id="thrChannelValue" value="">
                <input type="hidden" id="customerStatus" value="">
                <input type="hidden" id="appointmentPayServiceValue" value="">
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12 row">
                        <div class="col-sm-10">
                            <ul class="ulBox clearfix">
                                <li>
                                    <label>一级渠道</label>
                                    <select id="oneChannel" name="oneChannel" class="selectBox"
                                            onchange="Customer.inquire()">
                                    </select>
                                </li>
                                <li>
                                    <label>二级渠道</label>
                                    <select id="twoChannel" name="twoChannel" class="selectBox"
                                            onchange="Customer.inquire()">
                                    </select>
                                </li>
                                <li>
                                    <label>三级渠道</label>
                                    <select id="thrChannel" name="thrChannel" class="selectBox"
                                            onchange="Customer.inquire()">
                                    </select>
                                </li>
                                <li>
                                    <label>成交状态</label>
                                    <select id="dealStatus" name="dealStatus" class="selectBox"
                                            onchange="Customer.inquire()">
                                        <option value="">全部</option>
                                        <option value="已成交">已成交</option>
                                        <option value="未成交">未成交</option>
                                    </select>
                                </li>
                                <li>
                                    <label style="width: 40px;">TC</label>
                                    <input type="text" class="selectBox" id="fieldTc" name="fieldTc"
                                           style="border: 1px solid #999999"
                                           onchange="Customer.inquire()">
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-2">
                            <div style="width: 288px;height: 39px;border: 1px solid #cccccc;border-radius: 3px">
                                <span class="glyphicon glyphicon-search" style="padding: 7px 0px 0px 10px;"></span>
                                <input type="text" class="customerPhone" id="reach" placeholder="姓名/电话/微信/病历号"
                                       onchange="Customer.search()"
                                       style="width: 238px;height: 35px;border: none;float: right;outline:none;margin-top: 1px">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style="margin-top: 20px;">
                        <ul class="ul_li clearfix">
                            <li>
                                <label style="width: 80px;display: inline-block;">到诊时间</label>
                                <input type="text" id="startArrivalTime" class="selectBox"
                                       style="border: 1px solid #999999;width: 190px;"
                                       onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                                <span>-</span>
                                <input type="text" id="endArrivalTime" class="selectBox"
                                       style="border: 1px solid #999999;width: 190px;"
                                       onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                            </li>
                            <li>
                                <label style="width: 80px;display: inline-block;">匹配电话</label>
                                <input type="text" class="selectBox" id="customerPhone" name="customerPhone"
                                       style="border: 1px solid #999999"
                                >
                                <button type="button" class="btn" onclick="Customer.reservationMatching()"
                                        style="background: #5e8aa3;color: white">匹配
                                </button>
                            </li>
                            <li>
                                <label style="width: 80px;display: inline-block;">咨询项目</label>
                                <select type="text" class="selectBox" id="appointmentPayService"
                                        name="appointmentPayService" style="border: 1px solid #999999"
                                        onchange="Customer.inquire()">
                                </select>
                            </li>
                            <li style="float: right;margin: 0;">
                                <div class="clearfix">
                                    <div class="btn_box" style="float: right">
                                        @if(shiro.hasPermission("/customer/aOperations")){
                                        <button type="button" class="btn" onclick="Customer.specialRefund()">特殊退款
                                        </button>
                                        @}
                                        @if(shiro.hasPermission("/customer/aOperations")){
                                        <button type="button" class="btn" onclick="Customer.specialSupplement()">特殊补款
                                        </button>
                                        @}
                                        @if(shiro.hasPermission("/customer/delete")){
                                        <button type="button" class="btn" onclick="Customer.openToVoid()">作废</button>
                                        @}
                                        <button type="button" class="btn" onclick="Customer.resetSearch()">重置</button>
                                        @if(shiro.hasPermission("/customer/aOperations")){
                                        <button type="button" class="btn" onclick="Customer.uploadCustomer()">导入
                                        </button>
                                        @}
                                        @if(shiro.hasPermission("/customer/update")){
                                        <button type="button" class="btn" onclick="Customer.downLoad()">导出</button>
                                        @}


                                        <button type="button" class="btn" onclick="Customer.inputInfo()">导入预约查询</button>


                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-12" style="background:#3b97d3;;line-height: 46px;margin-top: 19px;">
                        <ul class="records clearfix bigSize">
                            <li onclick="Customer.totalNumber()">
                                总人数：<span style="color: #ff8a00" id="total">0</span>
                                金额：<span style="color: #03feb7"><span id="totalMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.newCustomsData()">
                                新客首次：<span style="color: #03feb7" id="first">0</span>
                                金额：<span style="color: #03feb7"><span id="firstMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.newSecondary()">
                                新客二次：<span style="color: red" id="secondary">0</span>
                                金额：<span style="color: red"><span id="secondaryMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.newOldGuest()">
                                老客：<span style="color: #fff701" id="oldGuest">0</span>
                                金额：<span style="color: #fff701"><span id="oldGuestMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.newRevisit()">
                                复诊：<span style="color: #ff00e0" id="revisit">0</span>
                                金额：<span style="color: #ff00e0"><span id="revisitMoney">0</span>元</span>
                            </li>
                        </ul>
                    </div>
                    <#table id="CustomerTable"/>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/arrival/customer/customer.js"></script>
<script src="${ctxPath}/static/js/common/jsChannel.js"></script>
<script>
    var oneChanneli = document.getElementById("oneChannelValue").value;
    var twoChanneli = document.getElementById("twoChannelValue").value;
    var thrChanneli = document.getElementById("thrChannelValue").value;
    $.post(Feng.ctxPath + "/channel/getChannelsss", function (data) {
        ChannelList = data;
        channelInit('oneChannel', 'twoChannel', 'thrChannel');
    }, "json");
    //初始化下拉预约项目列表
    $.post(Feng.ctxPath + "/payService/getList", function (data) {
        var txt = '<option value="">--请选择预约项目--</option>';
        for (var i = 0; i < data.length; i++) {
            txt += '<option value="' + data[i].department + '">' + data[i].department + '</option>';
        }
        document.getElementById('appointmentPayService').innerHTML = txt;
        //状态单选
        var seletepayservicename = $('#payservicenameValue').val();
        if (seletepayservicename != "") {
            $("#appointmentPayService option[value=" + seletepayservicename + "]").attr("selected", "selected");
        }
    }, "json");
</script>
@}
<style>
    ul {
        padding: 0;
        margin: 0;
    }

    .selectBox {
        width: 170px;
        height: 39px;
        border-radius: 5px;
        padding-left: 5px;
    }

    .ulBox {
        display: flex;
    }

    .ulBox > li {
        flex: 1;
    }

    .ulBox laber {
        display: inline-block;
        width: 80px;
    }

    .ul_li > li {
        float: left;
        margin-right: 2%
    }

    .ul_li label {
        display: inline-block;
        width: 80px;
    }

    .records > li {
        float: left;
        margin-right: 3%;
    }

    .records > li {
        color: white;
        cursor: pointer;
    }

    .records > li > span {
        font-weight: bolder;
    }

    .bigSize {
        font-size: 1.2em;
    }

    .btn_box button {
        margin: 0;
        color: white;
        background: #2eadd0;
        padding: 7px 30px;
        font-size: 1em;
    }
</style>